{extend name="default:layout:base" /}

{block name="main"}
<div id="app">
    <section id="wx-customenu">
        <div class="layui-row">
            <div class="layui-col-xs12">
                <blockquote class="layui-elem-quote">
                    编辑好菜单后,只有点击"保存并发布"才能同步到微信公众号！
                </blockquote>
            </div>
            <!--<div class="layui-col-xs3 tr" style="line-height: 52px;">
                <a href="javascript:;" class="layui-btn js-pull">下拉公众号菜单</a>
            </div>-->

            <div class="layui-col-xs4">
                <section class="wx-custommenu-phone">
                    <section class="wx-cp-single">
                <span class="wx-single-icon">
                    <i class="fa fa-circle"></i>
                    <i class="fa fa-circle"></i>
                    <i class="fa fa-circle"></i>
                    <i class="fa fa-circle"></i>
                    <i class="fa fa-circle"></i>
                </span>
                        <span class="wx-cp-title">WeChat</span>
                        <i class="fa fa-wifi"></i>
                        <span class="wx-cp-time">08:21 AM</span>
                        <span class="wx-cp-power">88%</span>
                        <i class="wx-cp-battery iconfont icon-iconset0252"></i>
                    </section>

                    <section class="wx-cp-weixin">
                        <span class="wx-weixin-return"><i class="fa fa-angle-left"></i>&nbsp;<span>返回</span></span>
                        <span class="wx-weixin-open">{$mp_info.nick_name}</span>
                        <span class="wx-weixin-user"><i class="fa fa-user"></i></span>
                    </section>

                    <section class="wx-customenu-menu">
                        <section class="wx-cm-menu clr">
                            <div class="wx-cm-decorate">
                                <i class="fa fa-keyboard-o"></i>
                            </div>

                            <!--自定义菜单项-->
                            <div class="wx-cm-master"
                                 :class="{'wx-master-childs-0': topMenu._child.length==0,'wx-master-childs-1': topMenu._child.length==1,'wx-master-childs-2': topMenu._child.length==2,'wx-master-childs-3': topMenu._child.length==3,'wx-master-childs-4': topMenu._child.length==4,'wx-master-childs-5': topMenu._child.length==5}"
                                 v-for="(topMenu, i) in list" :key="'top-'+i">
                                <div class="wx-cm-minor wx-cm-minor-1">
                                    <section>
                                        <template v-if="topMenu._child.length > 0">
                                            <!-- 子菜单数组 -->
                                            <div
                                                    v-for="(menu, j) in topMenu._child"
                                                    class="wx-cm-minor-menu"
                                                    @click="onClickMenu(menu, 'child', j)"
                                                    :key="'menu-'+j"
                                            >
                                                <div class="wx-cm-menu-edit-box"
                                                     v-show="menu.selected"
                                                >
                                                    <div class="wx-cm-menu-edit"></div>
                                                    <i class="fa fa-times-circle-o"
                                                       @click="onClickRemoveMenu('child', i, j)"
                                                    ></i>
                                                </div>
                                                <span>{{menu.name}}</span>
                                            </div>
                                        </template>

                                        <!-- 新增菜单按钮，当等于5个时，不显示 -->
                                        <div class="wx-cm-minor-add"
                                             @click="onClickAddMenu('child', i)"
                                             v-if="topMenu._child.length < 5"
                                        >
                                            <i class="wx-add-icon"></i>
                                        </div>
                                    </section>
                                </div>
                                <div class="wx-master-menu"
                                     @click="onClickMenu(topMenu, 'top', i)"
                                >
                                    <div class="wx-cm-menu-edit-box" v-show="topMenu.selected">
                                        <div class="wx-cm-menu-edit"></div>
                                        <i class="fa fa-times-circle-o"
                                           @click="onClickRemoveMenu('top', i)"
                                        ></i>
                                    </div>
                                    <span>{{topMenu.name}}</span>
                                </div>
                            </div>

                            <!--增加顶级菜单-->
                            <div v-if="list.length<3"
                                 @click="onClickAddMenu('top')"
                                 :class="{'wx-cm-add-0': list.length==0,'wx-cm-add-1': list.length==1, 'wx-cm-add-2': list.length==2}">
                                <i class="wx-add-icon"></i>
                            </div>
                        </section>
                    </section>
                </section>
            </div>
            <div class="layui-col-xs8">
                <!--渲染主菜单项-->
                <section class="wx-customenu-edit">
                    <form  class="layui-form">
                        <p class="wx-cd-title">菜单配置</p>

                        <div class="layui-form-item">
                            <label class="layui-form-label"><span class="text-danger">*</span>菜单名称</label>
                            <div class="layui-input-block">
                                <input  v-model="selectedMenu.name"
                                        type="text" class="layui-input" placeholder="不能超过4个汉字">
                            </div>
                        </div>

                        <!-- 如果已经有子菜单，则显示此提示 -->
                        <p class="wx-cd-title" v-show="selectedMenu._child.length">已有子菜单，无法设置动作</p>

                        <!-- 子菜单才需要显示这段 -->
                        <div id="fun-div" v-show="!selectedMenu._child.length">
                            <div class="layui-form-item">
                                <label class="layui-form-label"><span class="text-danger">*</span>菜单功能</label>
                                <div class="layui-input-block">
                                    {volist name="types" id="type"}
                                    <input lay-filter="type" name="type" type="radio" title="{$type}" value="{$key}" v-model="selectedMenu.type">
                                    {/volist}
                                </div>
                            </div>

                            <div class="layui-form-item"
                                 v-if="selectedMenu.type == 'click'">
                                <label class="layui-form-label"><span class="text-danger">*</span>关键词</label>
                                <div class="layui-input-block">
                                    <input  v-model="selectedMenu.key"
                                            type="text" class="layui-input" placeholder="请填写要触发的关键词">
                                </div>
                            </div>
                            <div class="layui-form-item"
                                 v-if="selectedMenu.type == 'miniprogram'">
                                <label class="layui-form-label"><span class="text-danger">*</span>APPID</label>
                                <div class="layui-input-block">
                                    <input  v-model="selectedMenu.appid"
                                            type="text" class="layui-input" placeholder="请填写小程序appid">
                                </div>
                            </div>
                            <div class="layui-form-item"
                                 v-if="selectedMenu.type == 'miniprogram'">
                                <label class="layui-form-label"><span class="text-danger">*</span>页面路径</label>
                                <div class="layui-input-block">
                                    <input  v-model="selectedMenu.pagepath"
                                            type="text" class="layui-input" placeholder="请填写小程序页面路径">
                                </div>
                            </div>
                            <div class="layui-form-item"
                                 v-if="selectedMenu.type == 'view' || selectedMenu.type == 'miniprogram'">
                                <label class="layui-form-label">
                                    <span class="text-danger">*</span>
                                    <span>{{selectedMenu.type == 'view' ? '跳转链接' : '备用网页'}}</span>
                                </label>
                                <div class="layui-input-block">
                                    <input  v-model="selectedMenu.url"
                                            type="text" class="layui-input" :placeholder="'请填写'+(selectedMenu.type == 'view' ? '跳转链接' : '备用网页')">
                                </div>
                            </div>
                        </div>
                    </form>
                </section>
            </div>
        </div>
        <div class="wx-customenu-button">
            <input type="button" class="layui-btn layui-btn-normal" value="保存并发布"
                   @click="onClickSubmit">
        </div>
    </section>
</div>
{/block}

{block name="js"}
<script src="{:plugin_static('static/libs/vue/vue-2.6.11.min.js')}"></script>
<script>
    layui.use(['form', 'jquery'], function () {
        var form = layui.form,
                $ = layui.jquery;

        //监听选中菜单功能
        form.on('radio(type)', function(data){
            $('#fun-div input[type=radio]').prop('checked', false);
            $(this).prop("checked", true);
            app.selectedMenu.type = data.value;
            form.render('radio');
        });

        let menuList = <?=$menu_list;?>
        , menuTemplate = function () {
            return {pid:0, name: '', type: 'click', key:'', url:'',appid:'',pagepath:'', _child: [], selected:1};
        };
        //菜单选中样式更新
        const removeActive = function () {
            app.list.map(item => item.selected = 0);
            for(let i = 0; i < app.list.length; i++){
                if(app.list[i]['_child'].length){
                    app.list[i]['_child'].map(item => item.selected = 0);
                }
            }
        };

        const app = new Vue({
            el: '#app',
            data:{
                list: menuList,
                menuName: '',
                hasSubMenu: true,
                selectedMenu: menuTemplate()
            },
            methods:{
                /**
                 * 点击保存并发布
                 */
                onClickSubmit(){
                    requestPost("{:url('savePost')}", {menu_list: this.list});
                },
                /**
                 * 点击新增菜单
                 * @param level 父菜单或子菜单
                 * @param i  父级索引
                 * @param j  子菜单索引
                 */
                onClickRemoveMenu(level, i, j){
                    if(level === 'top'){
                        this.list.splice(i, 1);
                    }else{
                        this.list[i]['_child'].splice(j, 1);
                    }
                    this.selectedMenu = menuTemplate();
                },
                /**
                 * 点击新增菜单
                 * @param level 父菜单或子菜单
                 * @param index 菜单索引
                 */
                onClickAddMenu(level, index){
                    removeActive();
                    if(level === 'top'){
                        this.list.push(menuTemplate());
                        this.selectedMenu = this.list[this.list.length-1];
                    }else{
                        this.list[index]['_child'].push(menuTemplate());
                        this.selectedMenu = this.list[index]['_child'][this.list[index]['_child'].length-1];
                    }
                    this.selectedMenu.selected = 1;
                    this.afterSelected();
                },
                /**
                 * 点击选中某个菜单
                 * @param menu 选中的菜单
                 * @param level 父菜单或子菜单
                 * @param index 菜单索引
                 */
                onClickMenu(menu, level, index){
                    removeActive();
                    menu.selected = 1;
                    this.selectedMenu = menu;
                    this.afterSelected();
                },
                //radio点击后续动作
                afterSelected(){
                    $('#fun-div input[type=radio]').prop('checked', false);
                    $('input[value='+this.selectedMenu.type+']').prop('checked', true);
                    form.render('radio');
                }
            }
        });
    });
</script>
{/block}

{block name="css"}
<style>
    #app{margin-top: 10px;}
    /* 右侧区域样式 */
    #wx-customenu{
        margin-bottom: 20px;
    }

    /*左侧手机样式*/
    .wx-custommenu-phone {
        float: left;
        position: relative;
        width: 316px;
        height: 580px;
        border: 1px solid rgb(231, 231, 235);
    }
    /*手机上部显示区域*/
    .wx-cp-single {
        position: relative;
        color: white;
        padding: 5px;
        background: rgb(35, 36, 38);
    }
    .wx-cp-single span {
        font-size: 10px;
    }
    .wx-single-icon {
        margin-left: -18px;
        display: inline-block;
        transform: scale(0.4, 0.4);
    }
    .wx-single-icon i {
        color: #fff;
    }
    .wx-cp-title {
        margin-left: -18px;
    }
    .wx-cp-time {
        margin-left: 32px;
    }
    .wx-cp-power {
        position: absolute;
        top: 6px;
        right: 20px;
    }
    .wx-cp-battery {
        position: absolute;
        top: 3px;
        right: 5px;
    }
    /*右侧显示区域样式*/
    .wx-customenu-edit {
        float: left;
        width: 608px;
        min-height: 580px;
        margin-left: 15px;
        border: 1px solid #e7e7eb;
        background: #f4f5f9;
        font-size: 14px;
        padding-right: 25px;
    }
    .wx-cdnm-notify li {
        margin-bottom: 10px;
        color: #616161;
        list-style: disc inside;
        line-height: 20px;
    }
    /*发布菜单按钮区域*/
    .wx-customenu-button {
        position: relative;
        top: 20px;
        padding: 20px 0;
        border-top: 1px solid #e7e7eb;
        clear: both;
        text-align: center;
    }
    /*手机中间用户信息区域*/
    .wx-cp-weixin {
        height: 30px;
        line-height: 30px;
        color: white;
        text-align: center;
        padding: 10px;
        background: rgb(57, 58, 61);
    }
    .wx-weixin-return {
        float: left;
        height: 100%;
        font-size: 16px;
        cursor: pointer;
    }
    .wx-weixin-open {
        position: relative;
        font-size: 16px;
        left: -12px;
    }
    .wx-weixin-user {
        float: right;
        font-size: 20px;
    }
    /*手机底部菜单显示区域*/
    .wx-customenu-menu {
        position: absolute;
        width: 100%;
        height: 46px;
        bottom: 0px;
        white-space: normal;
        border-top: 1px solid rgb(231, 231, 235);
        background: rgb(250, 250, 250);
    }
    .wx-customenu-menu div {
        float: left;
        text-align: center;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .wx-customenu-menu .wx-menu-emoji {
        position: relative;
        top: -12px;
        float: none;
        display: inline-block;
        vertical-align: bottom;
    }
    .wx-customenu-menu .wx-cm-decorate {
        width: 46px;
        border-right: 1px solid rgb(231, 231, 235);
    }
    .wx-customenu-menu .wx-cm-decorate i {
        line-height: 46px;
        font-size: 32px;
    }
    .wx-customenu-menu .wx-cm-add-0:hover, .wx-customenu-menu .wx-cm-add-1:hover, .wx-customenu-menu .wx-cm-add-2:hover {
        cursor: pointer;
    }
    .wx-customenu-menu .wx-cm-add-0 i, .wx-customenu-menu .wx-cm-add-1 i, .wx-customenu-menu .wx-cm-add-2 i {
        line-height: 46px;
    }
    /*自定义菜单显示样式*/
    .wx-customenu-menu .wx-cm-master {
        position: relative;
        z-index: 1;
    }
    .wx-customenu-menu .wx-cm-master:hover {
        cursor: pointer;
    }
    .wx-customenu-menu .wx-cm-master span {
        display: inline-block;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 46px;
        vertical-align: super;
    }
    .wx-customenu-menu .wx-cm-master .wx-master-menu {
        position: relative;
        width: 89px;
        height: 48px;
    }
    .wx-customenu-menu .wx-cm-master .wx-master-menu:hover::after {
        position: absolute;
        left: 2px;
        bottom: 5px;
        content: "";
        width: 90px;
        height: 36px;
        background: url("http://weixiao.qq.com/img/home/menu_movable.png") 0 center no-repeat;
    }
    .wx-customenu-menu .wx-cm-master-active {
        z-index: 10;
    }
    .wx-customenu-menu .wx-master-childs-0 {
        top: -48px;
    }
    .wx-customenu-menu .wx-master-childs-1 {
        top: -94px;
    }
    .wx-customenu-menu .wx-master-childs-2 {
        top: -140px;
    }
    .wx-customenu-menu .wx-master-childs-3 {
        top: -186px;
    }
    .wx-customenu-menu .wx-master-childs-4 {
        top: -232px;
    }
    .wx-customenu-menu .wx-master-childs-5 {
        top: -232px;
    }
    .wx-customenu-menu .wx-cm-add-0 {
        width: 270px;
        height: 46px;
    }
    .wx-customenu-menu .wx-cm-add-1 {
        width: 180px;
        height: 46px;
    }
    .wx-customenu-menu .wx-cm-add-2, .wx-customenu-menu .wx-cm-master {
        width: 90px;
        border-right: 1px solid #e7e7eb;
        height: 46px;
    }
    .wx-customenu-menu .wx-cm-add-3 {
        display: none;
    }
    .wx-customenu-menu .wx-cm-menu-edit-box {
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        color: #1E9FFF;
    }
    .wx-customenu-menu .wx-cm-menu-edit-box i {
        position: absolute;
        right: 1px;
        top: 1px;
        z-index: 10;
        font-size: 18px;
        background-color: #fff;
    }
    .wx-customenu-menu .wx-cm-menu-edit {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px solid;
    }
    .wx-customenu-menu .wx-cm-minor {
        width: 88px;
    }
    .wx-customenu-menu .wx-cm-minor-add {
        width: 88px;
        height: 46px;
        background: white;
    }
    .wx-customenu-menu .wx-cm-minor .wx-cm-minor-add {
        position: relative;
        border: 1px solid #e7e7eb;
        border-bottom: 0;
    }
    .wx-customenu-menu .wx-cm-minor-menu:hover::after {
        position: absolute;
        left: 2px;
        top: 5px;
        content: "";
        width: 88px;
        height: 36px;
        background: url("http://weixiao.qq.com/img/home/menu_movable.png") 0 center no-repeat;
    }
    .wx-customenu-menu .wx-cm-minor-1, .wx-customenu-menu .wx-cm-minor-1 .wx-cm-minor-add, .wx-customenu-menu .wx-cm-minor-1 .wx-cm-minor-menu, .wx-customenu-menu .wx-cm-minor-2 .wx-cm-minor-add, .wx-customenu-menu .wx-cm-minor-2 .wx-cm-minor-menu {
        width: 90px;
    }
    .wx-customenu-menu .wx-cm-minor-2 {
        border-right: 0;
    }
    .wx-customenu-menu .wx-cm-minor-add {
        width: 90px;
        height: 46px;
        background: white;
    }
    .wx-customenu-menu .wx-cm-minor-add i {
        line-height: 46px;
    }
    .wx-customenu-menu .wx-cm-minor-menu {
        position: relative;
        top: -1px;
        width: 90px;
        height: 46px;
        border: 1px solid #e7e7eb;
        border-bottom: 0;
        background: white;
    }
    .wx-customenu-menu .wx-cm-minor-menu-activity {
        z-index: 100;
    }
    /*增加按钮样式*/
    .wx-add-icon {
        position: relative;
        top: 10px;
        display: inline-block;
        width: 20px;
        height: 20px;
    }
    .wx-add-icon::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 20px;
        height: 3px;
        background: #333;
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .wx-add-icon::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 20px;
        height: 3px;
        background: #333;
    }
    .wx-customenu-menu .wx-cm-minor-add i {
        line-height: 46px;
    }
    /*点击后设置动作*/
    .wx-cd-title {
        margin: 20px;
        font-size: 14px;
    }
    .wx-cd-input-title span {
        font-size: 12px;
        color: #777;
    }
    .wx-form-group .wx-form-input {
        line-height: 30px;
        height: 30px;
        border: 1px solid #ddd;
        padding: 0 5px;
        color: #333;
        width: 520px !important;
        float: left;
    }
    .wx-form-group .wx-form-input-count {
        padding-right: 55px;
    }
    .menuFun select {
        height: 34px;
        line-height: 34px;
        width: 98px;
        float: left;
        border: 1px solid #ddd;
    }
    .menuFun input {
        height: 32px;
        line-height: 32px;
        width: 467px;
        padding: 0 7px;
        float: left;
        border: 1px solid #ddd;
    }
    .icon-iconset0252, .fa-user, .fa-angle-left {
        font-size: 20px;
        color: #fff;
    }
    .wx-single-icon i:hover  {
        color: #fff;
    }
    .fa-times-circle-o {
        color: #FF5722;
    }
</style>
{/block}